<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
    <div id="app">
  <site-info
    v-for="site in sites"
    :id="site.id"
    :title="site.title"
  ></site-info>
</div>
 
<script>
const Site = {
    data() {
    return {
    sites: [
      { id: 1, title: 'Google' },
      { id: 2, title: 'Runoob' },
      { id: 3, title: 'Taobao' }
    ]
    }
    }
    }
 
const app = Vue.createApp(Site)
 
    app.component('site-info', {
        props: ['id','title'],
        template: `<h4>{{ id }} - {{ title }}</h4>`
    })
 
    app.mount('#app')
</script>
</body>
</html>
